import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'

import News from '../../components/news'
import Star from '../../components/star'
import Qrcode from '../../components/qrcode'
import Today from '../../components/today'

import './index.scss'

export default class Index extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      tabIndex: 0,
      news:[],
      today:[],
      data:[],
      qrcode:'',
    };
  }

  config = {
    navigationBarTitleText: '首页'
  }

  handleClick(value) {
    const {news,today,qrcode}=this.state;
    const item=links[value];
    let url,data;
    this.setState({
      tabIndex: value
    });
    if(value === 0){
      url=`https://${item.link}/toutiao/index`;
      data={
        key:item.key,
        type:'',
      }
      news.length === 0 && Taro.request({url,data,}).then(res => this.setState({news:res.data.result.data}))
    }
    else if(value === 1){
      const date = new Date();
      url=`https://${item.link}/todayOnhistory/queryEvent.php`;
      data={
        key:item.key,
        date:`${date.getMonth()+1}/${date.getDate()}`,
      }
      today.length === 0 && Taro.request({url,data,}).then(res => this.setState({today:res.data.result}))
    }
    else if(value === 2){
      url=`https://${item.link}/qrcode/api`;
      data={
        key:item.key,
        text:`fuck you`,
      }
      //!qrcode && Taro.request({url,data,}).then(res => this.setState({qrcode:res.data.result.base64_image}))
    }
    else if(value === 3){
      
    }
    else{
      console.log('fuck you')
    }
  }
  componentDidMount() { 
    this.handleClick(3);
  }

  render() {
    const { tabIndex,data,news,today,qrcode } = this.state;
    return (
      <View className='Index'>
        <AtTabs current={tabIndex} tabList={tabList} scroll={true} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={tabIndex} index={0} >
            { tabIndex===0 && <News data={news} /> }
          </AtTabsPane>
          <AtTabsPane current={tabIndex} index={1}>
            { tabIndex===1 && <Today data={today} /> }
          </AtTabsPane>
          <AtTabsPane current={tabIndex} index={2}>
            { tabIndex===2 && <Qrcode data={qrcode} /> }
          </AtTabsPane>
          <AtTabsPane current={tabIndex} index={3}>
            { tabIndex===3 && <Star data={today} /> }
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}

const tabList = [
  { title: '新闻头条' }, 
  { title: '历史上的今天' }, 
  { title: '二维码生成' },
  { title: '星座运势' }
];
const links = [
  {link:'v.juhe.cn',key:'9c34fbbe16b74161f193aaa5aa9ab3bb'},
  {link:'v.juhe.cn',key:'cc8938664e6c0d6e251df85db7aa1045'},
  {link:'apis.juhe.cn',key:'0371dbcdac7089caec0f15c193518f99'},
  {link:'web.juhe.cn:8080',key:'4b82e25abe9625965940be64343e26e1'},
];

